<template>
  <div class="login-bd">
    <div class="bd">
      <template v-if="!isWait">
        <div class="cover-img">
          <img src="@/assets/images/login/login-cover.png" alt="" />
        </div>
        <div class="qr-code-container">
          <h3>扫码登录</h3>
          <div class="qr-code">
            <canvas
              width="160px"
              height="160px"
              style="width: 128px; height: 128px"
              ref="canvasRef"
              class="canvas"
            ></canvas>
            <div class="expire" v-if="expire">
              <p>二维码失效</p>
              <a href="javascript:;" class="refresh" @click.prevent="getQRImg">点击刷新</a>
            </div>
          </div>
          <p>使用 <router-link to="/download">网易云音乐APP</router-link> 扫码登录</p>
        </div>
      </template>
      <div class="wait-confirm" v-else>
        <img src="@/assets/images/login/login-wait.png" alt="" />
        <h3>扫描成功</h3>
        <p>请在手机上确认登录</p>
      </div>
    </div>
    <a href="javascript:;" class="other" @click="$parent.loginMethod = 'other'">选择其他模式登录</a>
  </div>
</template>

<script>
import { QRKey, QRImg, QRCheck, accountInfo, userInfo } from '@/api/login.js'
export default {
  data() {
    return {
      // 二维码base64
      qrimg: '',
      // 二维码过期
      expire: false,
      // 轮询二维码状态的定时器
      timer: null,
      // 是否等待确认
      isWait: false,
      unikey: ''
    }
  },
  methods: {
    // canvas绘制二维码
    drawQR(src) {
      const canvas = this.$refs.canvasRef
      const ctx = canvas.getContext('2d')
      const img = new Image()
      img.src = src
      img.onload = function () {
        ctx.drawImage(img, 10, 10, 160, 160, 0, 0, 160, 160)
      }
    },
    // 获取二维码图片
    async getQRImg() {
      // 获取二维码key
      const { data: res } = await QRKey()
      const { data: res1 } = await QRImg(res.data.unikey)
      this.expire = false
      this.qrimg = res1.data.qrimg
      this.drawQR(this.qrimg)
      this.unikey = res.data.unikey
      console.log(res.data.unikey)
      this.getQRstatus()
    },
    // 轮询二维码状态
    scanPoolling() {
      if (this.timer) {
        window.clearTimeout(this.timer)
        this.timer = null
      }
      this.timer = window.setTimeout(() => {
        this.getQRstatus()
      }, 1500)
    },
    // 获取二维码状态
    async getQRstatus() {
      const { data: res3 } = await QRCheck(this.unikey)
      console.log(res3)
      if (res3.code === 800) {
        //二维码过期
        this.expire = true
      } else if (res3.code === 801) {
        //等待扫码
        this.scanPoolling()
      } else if (res3.code === 802) {
        //等待确认
        this.isWait = true
        this.scanPoolling()
      } else if (res3.code === 803) {
        //登录成功
        console.log(res3)
        res3.cookie.split(';;').forEach(item => {
          document.cookie = item
          console.log(item)
        })
        this.$store.commit('Login/setCookie', res3.cookie)
        this.$store.commit('Login/setLoginDisplay', false)
        this.$store.commit('Login/setisLogin', true)
        this.isWait = false
        this.getAccountInfo()
      }
    },
    // 获取账号信息
    async getAccountInfo() {
      const { data: res } = await accountInfo()
      this.$store.commit('Login/setAccountInfo', res)
      console.log(res)
      this.getUserInfo(res.account.id)
    },
    // 获取用户信息
    async getUserInfo(uid) {
      const { data } = await userInfo(uid)
      this.$store.commit('Login/setUserInfo', data)
    }
  },
  created() {
    // 获取登录二维码
    this.getQRImg()
  },
  beforeDestroy() {
    window.clearTimeout(this.timer)
    this.timer = null
    this.isWait = false
  }
}
</script>

<style lang="less" scoped>
.login-bd {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: center;
  margin: 20px 0;
  width: 100%;
  height: 270px;
  .bd {
    display: flex;
    justify-content: center;
    .cover-img {
      img {
        width: 125px;
        height: 220px;
      }
    }
    .qr-code-container {
      margin-left: 25px;
      width: 200px;
      text-align: center;
      h3 {
        font-size: 18px;
        font-weight: 500;
        text-align: center;
      }
      .qr-code {
        position: relative;
        width: 138px;
        height: 138px;
        padding: 4px;
        margin: 13px auto;
        .expire {
          position: absolute;
          top: 0;
          left: 0;
          width: 138px;
          height: 138px;
          background: rgba(255, 255, 255, 0.9);
          p {
            margin: 45px auto 6px;
            width: 100%;
            font-size: 12px;
            color: rgba(0, 0, 0, 0.8);
            font-weight: 500;
            text-align: center;
          }
          .refresh {
            display: block;
            margin: 0 auto;
            padding-right: 0;
            width: 66px;
            height: 26px;
            line-height: 24px;
            text-align: center;
            border-radius: 4px;
            background: linear-gradient(180deg, #81dd81 0%, #55a055 100%);
            border: 1px solid #5baf5b;
            color: #fff;
            font-size: 12px;
            &:hover {
              text-decoration: none;
            }
          }
        }
      }
      p {
        font-size: 12px;
        top: 181px;
        width: 200px;
        text-align: center;
        line-height: 17px;
        color: rgba(0, 0, 0, 0.4);
        a {
          color: #0c73c2;
        }
      }
    }
    .wait-confirm {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      img {
        width: 140px;
        height: 140px;
      }
      h3 {
        margin-top: 12px;
        font-size: 18px;
        font-weight: 450;
        line-height: 24px;
        color: rgba(0, 0, 0, 0.8);
      }
      p {
        margin-top: 4px;
        font-size: 14px;
        color: #333;
      }
    }
  }
  .other {
    align-self: center;
    display: block;
    width: 118px;
    height: 28px;
    font-size: 12px;
    border: 1px solid #979797;
    border-radius: 15px;
    line-height: 28px;
    text-align: center;
    color: rgba(0, 0, 0, 0.8);
    &:hover {
      text-decoration: none;
    }
  }
}
</style>
